import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import dayjs from 'dayjs';

export const columns: BasicColumn[] = [
  {
    title: '应用名称',
    dataIndex: 'deptName',
    width: 300,
    align: 'left',
  },
  {
    title: 'Url',
    dataIndex: 'deptName',
    width: 300,
    align: 'left',
  },
  {
    title: '状态码',
    dataIndex: 'status',
    width: 80,
  },
  {
    title: '耗时(ms)',
    dataIndex: 'status',
    width: 80,
    sorter: true
  },
  {
    title: '等级',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 0;
      const color = enable ? 'green' : 'red';
      const text = enable ? 'Error' : 'Warning';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'id',
    width: 180,
    sorter: true,
    fixed: 'right',
    customRender: ({record})=>{
      return record.createTime;
    }
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: '[startDate, endDate]',
    label: '日期范围',
    labelWidth: 80,
    component: 'RangePicker',
    colProps: { xs: 24, md: 8, lg: 6 },
    componentProps: {
      format: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['开始时间', '结束时间'],
      showTime: { format: 'HH:mm:ss' },
    },
    defaultValue:[dayjs(new Date(new Date().getFullYear() - 1, new Date().getMonth(), new Date().getDate())).format('YYYY-MM-DD'),dayjs(new Date()).format('YYYY-MM-DD')]
  },
  {
    field: 'deptName',
    label: '应用名称',
    component: 'Select',
    labelWidth: 80,
    componentProps: {
      options: [
        { label: '用户Api', value: 'cngot.svc.userapi' }
      ],
    },
    colProps: { xs: 24, md: 8, lg: 6 },
  },
  {
    field: 'url',
    label: 'Url',
    labelWidth: 80,
    component: 'Input',
    colProps: { xs: 24, md: 8, lg: 6 },
  },
  {
    field: 'status',
    label: '等级',
    labelWidth: 80,
    component: 'Select',
    defaultValue: 'trace',
    componentProps: {
      options: [
        { label: 'Trace', value: 'trace' },
        { label: 'Debug', value: 'debug' },
        { label: 'Information', value: 'infor' },
        { label: 'Warning', value: 'warn' },
        { label: 'Error', value: 'error' },
      ],
    },
    colProps: { xs: 24, md: 8, lg: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'deptName',
    label: '部门名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'parentDept',
    label: '上级部门',
    component: 'TreeSelect',
    ifShow({ values }) {
      const { deptName, parentDept } = values;
      // Hide without a parentDept when editing
      return parentDept || (!deptName && !parentDept);
    },
    componentProps: {
      fieldNames: {
        label: 'deptName',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
    required: true,
  },
  {
    field: 'orderNo',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '启用', value: '0' },
        { label: '停用', value: '1' },
      ],
    },
    required: true,
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
  },
];
